<template>
    <el-card class="time-contain">
        <div class="time">
            <div>
                <el-button
                    :type="model === 'day' ? 'primary' : 'default'"
                    size="large"
                    @click="modelClick('day')"
                >
                    日
                </el-button>
                <el-button
                    size="large"
                    :type="model === 'week' ? 'primary' : 'default'"
                    @click="modelClick('week')"
                >
                    周
                </el-button>
                <el-button
                    size="large"
                    :type="model === 'month' ? 'primary' : 'default'"
                    @click="modelClick('month')"
                >
                    月
                </el-button>
            </div>
            <div class="right">
                <div>
                    <el-button text @click="action.pre">上一个</el-button>
                </div>
                <div>{{ time }}</div>
                <div v-if="!state.new">
                    <el-button text @click="action.new">最新</el-button>
                </div>
                <div v-if="!state.next">
                    <el-button text @click="action.next">下一个</el-button>
                </div>
            </div>
        </div>
    </el-card>
    <div class="img-group" ref="imgGroupRef">
        <el-row :gutter="20" id="img-items" v-if="page == 1 && loading">
            <el-col
                class="img-item"
                v-for="n in 18"
                :key="n"
                :xs="12"
                :sm="6"
                :md="4"
            >
                <Skeleton />
            </el-col>
        </el-row>
        <el-row :gutter="20" id="img-items" v-else>
            <el-col
                class="img-item"
                v-for="u in sourceData"
                :key="u.id"
                :xs="12"
                :sm="6"
                :md="4"
            >
                <Image
                    :url="u.url"
                    :avatar="u.author?.avatar"
                    :title="u.title"
                    :name="u.author?.name"
                    :num="u.num"
                    :progress="progress.get(u.id)"
                    @click="download(u.id)"
                />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
/* --------------------------------- DEFAULT -------------------------------- */
import { ref, watch, nextTick } from "vue"

/* ----------------------------------- API ---------------------------------- */
import { useModel, useProgress } from "./hooks"

/* ---------------------------------- TYPE ---------------------------------- */
import type { TImgs, TModel } from "./type"

/* ----------------------------------- UI ----------------------------------- */
import Skeleton from "./component/Skeleton.vue"
import Image from "./component/ImageInfo.vue"
/* --------------------------------- Content -------------------------------- */
// TODO::日期和榜单切换的时候图片加载没有中断

const loading = ref<boolean>(false)
const sourceData = ref<TImgs[]>([])
const { progress } = useProgress()

const { page, model, time, action, state } = useModel(sourceData, loading)

watch(sourceData, async () => {
    const buttonObserve = new IntersectionObserver(
        (event) => {
            if (event[0].isIntersecting) {
                page.value++
                buttonObserve.disconnect()
            }
        },
        {
            rootMargin: "50px",
        },
    )

    await nextTick
    const els = document.getElementById("img-items")?.children
    if (els && sourceData.value.length > 0) {
        const el = els[els.length - 1]
        buttonObserve.observe(el)
    }
})
/* -------------------------------- Content-Function -------------------------------- */
const modelClick = (modelItem: TModel): void => {
    if (model.value === modelItem) return
    model.value = modelItem
}

const download = (id: number): void => {
    if (progress.has(id)) {
        return
    }
    const data = ref({ state: "start", progress: 0 })
    progress.set(id, data)
    const timeId = setInterval(() => {
        const data = progress.get(id)
        if (!data) {
            return
        }
        data.value.state = "loading"
        data.value.progress += 10

        if (data?.value.progress >= 100) {
            clearInterval(timeId)
            data.value.state = "end"
            console.log("清除定时器")
        }
    }, 1000)
}
</script>
<style lang="scss" scoped>
.time {
    margin-bottom: 20px;
}

.el-col {
    margin-bottom: 20px;
}

.time {
    display: flex;
    justify-content: space-between;

    .right {
        display: flex;
        align-items: center;
    }
}

.time-contain {
    margin-bottom: 20px;
}
</style>
